React useEffect: Yon ta'sirlar va tozalash naqshlarini o'zlashtirish

useEffect bu funksional komponentlarda yon ta'sirlarni amalga oshirishga imkon beruvchi asosiy React Hook'idir. Undan samarali foydalanishni tushunish mustahkam va qo'llab-quvvatlanadigan React ilovalarini yaratish uchun juda muhimdir. Ushbu keng qamrovli qo'llanma useEffectning nozikliklarini, turli yon ta'sir stsenariylarini, tozalash naqshlarini va eng yaxshi amaliyotlarni o'rganadi.

Yon ta'sirlar nima?

React kontekstida yon ta'sir - bu tashqi dunyo bilan o'zaro aloqada bo'ladigan yoki komponent doirasidan tashqaridagi biror narsani o'zgartiradigan har qanday operatsiya. Keng tarqalgan misollar quyidagilarni o'z ichiga oladi:

• Ma'lumotlarni olish: Serverdan ma'lumotlarni olish uchun API so'rovlarini amalga oshirish.
• DOM manipulyatsiyasi: DOM'ni bevosita o'zgartirish (garchi React deklarativ yangilanishlarni rag'batlantirsa ham).
• Obunalarni sozlash: Hodisalarga yoki tashqi ma'lumotlar manbalariga obuna bo'lish.
• Taymerlardan foydalanish: setTimeout yoki setInterval'ni sozlash.
• Log yozish: Konsolga yozish yoki analitika xizmatlariga ma'lumot yuborish.
• Brauzer API'lari bilan bevosita ishlash: Masalan, localStorage'ga kirish yoki Geolocation API'dan foydalanish.

React komponentlari sof funksiyalar bo'lish uchun mo'ljallangan, ya'ni ular har doim bir xil kirish ma'lumotlari (props va state) uchun bir xil natijani berishi kerak. Yon ta'sirlar bu soflikni buzadi, chunki ular oldindan aytib bo'lmaydigan xatti-harakatlarni keltirib chiqarishi va komponentlarni sinovdan o'tkazishni va tushunishni qiyinlashtirishi mumkin. useEffect bu yon ta'sirlarni boshqarishning nazorat qilinadigan usulini taqdim etadi.

useEffect Hook'ini tushunish

useEffect Hook'i ikkita argumentni qabul qiladi:

1. Yon ta'sir sifatida bajariladigan kodni o'z ichiga olgan funksiya.
2. Ixtiyoriy bog'liqliklar massivi.

Asosiy sintaksis:

            useEffect(() => {
  // Yon ta'sir kodi shu yerda
}, [/* Bog'liqliklar massivi */]);
            

              
                Copy
              
            
          

Bog'liqliklar massivi

Bog'liqliklar massivi effekt funksiyasi qachon ishga tushirilishini nazorat qilish uchun juda muhimdir. Bu effekt bog'liq bo'lgan qiymatlar (odatda props yoki state o'zgaruvchilari) massividir. useEffect effekt funksiyasini faqat bog'liqliklar massividagi biror qiymat oxirgi renderdan keyin o'zgargan bo'lsa ishga tushiradi.

Keng tarqalgan bog'liqliklar massivi stsenariylari:

• Bo'sh bog'liqliklar massivi ([]): Effekt faqat bir marta, dastlabki renderdan so'ng ishga tushadi. Bu ko'pincha komponent yuklanganda ma'lumotlarni olish kabi ishga tushirish vazifalari uchun ishlatiladi.
• Qiymatlarga ega bog'liqliklar massivi ([prop1, state1]): Effekt belgilangan bog'liqliklardan birortasi o'zgarganda ishga tushadi. Bu props yoki state'dagi o'zgarishlarga javob berish va komponentni shunga mos ravishda yangilash uchun foydalidir.
• Bog'liqliklar massivi yo'q (undefined): Effekt har bir renderdan keyin ishga tushadi. Bu odatda tavsiya etilmaydi, chunki ehtiyotkorlik bilan ishlanmasa, u unumdorlik muammolariga va cheksiz tsikllarga olib kelishi mumkin.

Keng tarqalgan useEffect naqshlari va misollari

1. Ma'lumotlarni olish

Ma'lumotlarni olish useEffect uchun eng keng tarqalgan foydalanish holatlaridan biridir. Quyida API'dan foydalanuvchi ma'lumotlarini olish misoli keltirilgan:

            import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [userId]);

  if (loading) return 
Foydalanuvchi ma'lumotlari yuklanmoqda...
;
  if (error) return 
Xato: {error.message}
;
  if (!user) return 
Foydalanuvchi ma'lumotlari mavjud emas.
;

  return (
    

      
{user.name}
      
Email: {user.email}
      
Manzil: {user.location}
    
  );
}

export default UserProfile;
            

              
                Copy
              
            
          

Tushuntirish:

• useEffect hook'i userId prop o'zgarganda foydalanuvchi ma'lumotlarini olish uchun ishlatiladi.
• Bog'liqliklar massivi [userId], shuning uchun effekt userId prop yangilanganda qayta ishga tushadi.
• fetchData funksiyasi fetch yordamida API so'rovini amalga oshiradigan async funksiyadir.
• Xatoliklarni qayta ishlash try...catch bloki yordamida amalga oshirilgan.
• Foydalanuvchiga tegishli xabarlarni ko'rsatish uchun yuklanish va xatolik holatlari ishlatiladi.

2. Obunalar va hodisa tinglovchilarini sozlash

useEffect shuningdek, tashqi ma'lumotlar manbalariga obunalarni yoki hodisa tinglovchilarini sozlash uchun ham foydalidir. Xotira sizib chiqishining oldini olish uchun komponent o'chirilganda ushbu obunalarni tozalash juda muhim.

            import React, { useState, useEffect } from 'react';

function OnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    function handleStatusChange() {
      setIsOnline(navigator.onLine);
    }

    window.addEventListener('online', handleStatusChange);
    window.addEventListener('offline', handleStatusChange);

    // Tozalash funksiyasi
    return () => {
      window.removeEventListener('online', handleStatusChange);
      window.removeEventListener('offline', handleStatusChange);
    };
  }, []);

  return (
    
Siz hozir: {isOnline ? 'Onlayn' : 'Oflayn'}
  );
}

export default OnlineStatus;
            

              
                Copy
              
            
          

Tushuntirish:

• useEffect hook'i online va offline hodisalari uchun hodisa tinglovchilarini sozlaydi.
• Bog'liqliklar massivi [], shuning uchun effekt komponent yuklanganda faqat bir marta ishga tushadi.
• Tozalash funksiyasi (effekt funksiyasidan qaytarilgan) komponent o'chirilganda hodisa tinglovchilarini olib tashlaydi.

3. Taymerlardan foydalanish

setTimeout va setInterval kabi taymerlarni ham useEffect yordamida boshqarish mumkin. Yana, xotira sizib chiqishining oldini olish uchun komponent o'chirilganda taymerni tozalash zarur.

            import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // Tozalash funksiyasi
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    
O'tgan vaqt: {count} soniya
  );
}

export default Timer;
            

              
                Copy
              
            
          

Tushuntirish:

• useEffect hook'i har soniyada count holatini oshiradigan intervalni sozlaydi.
• Bog'liqliklar massivi [], shuning uchun effekt komponent yuklanganda faqat bir marta ishga tushadi.
• Tozalash funksiyasi (effekt funksiyasidan qaytarilgan) komponent o'chirilganda intervalni tozalaydi.

4. DOM'ni bevosita manipulyatsiya qilish

React deklarativ yangilanishlarni rag'batlantirsa-da, DOM'ni bevosita manipulyatsiya qilish kerak bo'lgan holatlar bo'lishi mumkin. useEffect bu maqsad uchun ishlatilishi mumkin, lekin buni ehtiyotkorlik bilan qilish kerak. Avval ref kabi muqobil variantlarni ko'rib chiqing.

            import React, { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    
  );
}

export default FocusInput;
            

              
                Copy
              
            
          

Tushuntirish:

• useRef hook'i input elementi uchun ref yaratish uchun ishlatiladi.
• useEffect hook'i dastlabki renderdan so'ng input elementiga fokusni o'rnatadi.
• Bog'liqliklar massivi [], shuning uchun effekt komponent yuklanganda faqat bir marta ishga tushadi.

Tozalash funksiyalari: Xotira sizib chiqishining oldini olish

useEffectdan foydalanishning eng muhim jihatlaridan biri bu tozalash funksiyasini tushunishdir. Tozalash funksiyasi - bu effekt funksiyasidan qaytariladigan funksiya. U komponent o'chirilganda yoki effekt funksiyasi qayta ishga tushishidan oldin (agar bog'liqliklar o'zgargan bo'lsa) bajariladi.

Tozalash funksiyasining asosiy maqsadi xotira sizib chiqishining oldini olishdir. Xotira sizib chiqishi resurslar (masalan, hodisa tinglovchilari, taymerlar yoki obunalar) endi kerak bo'lmaganda to'g'ri bo'shatilmaganda sodir bo'ladi. Bu unumdorlik muammolariga va jiddiy holatlarda ilovaning ishdan chiqishiga olib kelishi mumkin.

Tozalash funksiyalaridan qachon foydalanish kerak

Agar effekt funksiyangiz quyidagilardan birini bajarsa, har doim tozalash funksiyasidan foydalanishingiz kerak:

• Tashqi ma'lumotlar manbalariga obunalarni sozlaydi.
• Window yoki document'ga hodisa tinglovchilarini qo'shadi.
• Taymerlardan foydalanadi (setTimeout yoki setInterval).
• DOM'ni bevosita o'zgartiradi.

Tozalash funksiyalari qanday ishlaydi

Tozalash funksiyasi quyidagi stsenariylarda bajariladi:

• Komponentni o'chirish: Komponent DOM'dan olib tashlanganda.
• Effektni qayta ishga tushirish: Bog'liqliklardagi o'zgarishlar tufayli effekt funksiyasi yana bajarilishidan oldin. Bu yangi effekt ishga tushirilishidan oldin oldingi effektning to'g'ri tozalanishini ta'minlaydi.

Tozalash funksiyasi misoli (qayta ko'rib chiqilgan)

Keling, avvalgi OnlineStatus misolini qayta ko'rib chiqaylik:

            import React, { useState, useEffect } from 'react';

function OnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    function handleStatusChange() {
      setIsOnline(navigator.onLine);
    }

    window.addEventListener('online', handleStatusChange);
    window.addEventListener('offline', handleStatusChange);

    // Tozalash funksiyasi
    return () => {
      window.removeEventListener('online', handleStatusChange);
      window.removeEventListener('offline', handleStatusChange);
    };
  }, []);

  return (
    
Siz hozir: {isOnline ? 'Onlayn' : 'Oflayn'}
  );
}

export default OnlineStatus;
            

              
                Copy
              
            
          

Ushbu misolda tozalash funksiyasi effekt funksiyasida qo'shilgan hodisa tinglovchilarini olib tashlaydi. Bu komponent o'chirilganda yoki effektni qayta ishga tushirish kerak bo'lganda hodisa tinglovchilarining endi faol emasligini ta'minlash orqali xotira sizib chiqishining oldini oladi.

useEffect'dan foydalanish bo'yicha eng yaxshi amaliyotlar

useEffectdan foydalanishda quyidagi eng yaxshi amaliyotlarga rioya qilish kerak:

• Effektlarni fokuslangan holda saqlang: Har bir useEffect bitta, aniq belgilangan yon ta'sir uchun mas'ul bo'lishi kerak. Bir nechta bog'liq bo'lmagan yon ta'sirlarni bitta useEffectga birlashtirishdan saqlaning. Bu kodingizni yanada modulli, sinovdan o'tkaziladigan va tushunarli qiladi.
• Bog'liqliklar massividan oqilona foydalaning: Har bir useEffect uchun bog'liqliklarni diqqat bilan ko'rib chiqing. Keraksiz bog'liqliklarni qo'shish effektning keragidan ko'ra tez-tez ishlashiga olib kelishi va unumdorlik muammolariga sabab bo'lishi mumkin. Kerakli bog'liqliklarni qoldirib ketish esa effekt kerak bo'lganda ishlamasligiga va kutilmagan xatti-harakatlarga olib kelishi mumkin.
• Har doim tozalang: Agar effekt funksiyangiz biron bir resursni (masalan, hodisa tinglovchilarini, taymerlarni yoki obunalarni) sozlasa, komponent o'chirilganda yoki effektni qayta ishga tushirish kerak bo'lganda ushbu resurslarni bo'shatish uchun har doim tozalash funksiyasini taqdim eting. Bu xotira sizib chiqishining oldini oladi.
• Cheksiz tsikllardan saqlaning: useEffect ichida state'ni yangilashda ehtiyot bo'ling. Agar state yangilanishi effektning qayta ishga tushishiga olib kelsa, bu cheksiz tsiklga olib kelishi mumkin. Buning oldini olish uchun state yangilanishi shartli ekanligiga yoki bog'liqliklar to'g'ri sozlanganligiga ishonch hosil qiling.
• Bog'liqlik funksiyalari uchun useCallback'ni ko'rib chiqing: Agar siz useEffectga bog'liqlik sifatida funksiya uzatayotgan bo'lsangiz, funksiyani yodda saqlash uchun useCallbackdan foydalanishni ko'rib chiqing. Bu funksiyaning har bir renderda qayta yaratilishining oldini oladi, bu esa effektning keraksiz ravishda qayta ishlashiga sabab bo'lishi mumkin.
• Murakkab mantiqni ajratib oling: Agar sizning useEffectingiz murakkab mantiqni o'z ichiga olsa, uni alohida funksiyaga yoki maxsus Hook'ga ajratib olishni ko'rib chiqing. Bu kodingizni yanada o'qiladigan va qo'llab-quvvatlanadigan qiladi.
• Effektlaringizni sinovdan o'tkazing: Effektlaringiz to'g'ri ishlayotganligini va tozalash funksiyalari resurslarni to'g'ri bo'shatayotganligini ta'minlash uchun testlar yozing.

Ilg'or useEffect texnikalari

1. useRef yordamida qiymatlarni renderlar orasida saqlash

Ba'zan, komponentni qayta render qilmasdan qiymatni renderlar orasida saqlab qolish kerak bo'ladi. Bu maqsad uchun useRefdan foydalanish mumkin. Masalan, siz prop yoki state o'zgaruvchisining oldingi qiymatini saqlash uchun useRefdan foydalanishingiz mumkin.

            import React, { useState, useEffect, useRef } from 'react';

function PreviousValue({ value }) {
  const previousValue = useRef(null);

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    
Joriy qiymat: {value}, Oldingi qiymat: {previousValue.current}
  );
}

export default PreviousValue;
            

              
                Copy
              
            
          

Tushuntirish:

• useRef hook'i value prop'ining oldingi qiymatini saqlash uchun ref yaratish uchun ishlatiladi.
• useEffect hook'i value prop o'zgarganda ref'ni yangilaydi.
• Ref yangilanganda komponent qayta render qilinmaydi, chunki ref'lar qayta renderlashni keltirib chiqarmaydi.

2. Debouncing va Throttling

Debouncing va throttling - bu funksiyaning bajarilish tezligini cheklash uchun ishlatiladigan texnikalar. Bu scroll yoki resize kabi tez-tez ishga tushadigan hodisalarni qayta ishlashda unumdorlikni oshirish uchun foydali bo'lishi mumkin. useEffect React komponentlarida debouncing va throttlingni amalga oshirish uchun maxsus hooklar bilan birgalikda ishlatilishi mumkin.

3. Qayta foydalanish mumkin bo'lgan effektlar uchun maxsus Hook'lar yaratish

Agar siz bir nechta komponentlarda bir xil useEffect mantiqidan foydalanayotganingizni sezsangiz, ushbu mantiqni o'z ichiga olgan maxsus Hook yaratishni ko'rib chiqing. Bu kodni qayta ishlatishga yordam beradi va komponentlaringizni ixchamlashtiradi.

Masalan, siz API'dan ma'lumotlarni olish uchun maxsus Hook yaratishingiz mumkin:

            import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const data = await response.json();
        setData(data);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;
            

              
                Copy
              
            
          

Keyin, siz bu maxsus Hook'ni o'z komponentlaringizda ishlatishingiz mumkin:

            import React from 'react';
import useFetch from './useFetch';

function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`);

  if (loading) return 
Foydalanuvchi ma'lumotlari yuklanmoqda...
;
  if (error) return 
Xato: {error.message}
;
  if (!user) return 
Foydalanuvchi ma'lumotlari mavjud emas.
;

  return (
    

      
{user.name}
      
Email: {user.email}
      
Manzil: {user.location}
    
  );
}

export default UserProfile;
            

              
                Copy
              
            
          

Yo'l qo'ymaslik kerak bo'lgan keng tarqalgan xatolar

• Tozalash funksiyalarini unutish: Bu eng keng tarqalgan xato. Xotira sizib chiqishining oldini olish uchun resurslarni har doim tozalang.
• Keraksiz qayta renderlar: Keraksiz effekt ijrolarini oldini olish uchun bog'liqliklar massivlari optimallashtirilganligiga ishonch hosil qiling.
• Tasodifiy cheksiz tsikllar: useEffect ichidagi state yangilanishlariga juda ehtiyot bo'ling. Shartlar va bog'liqliklarni tekshiring.
• Linter ogohlantirishlarini e'tiborsiz qoldirish: Linterlar ko'pincha etishmayotgan bog'liqliklar yoki useEffect dan foydalanish bilan bog'liq potentsial muammolar haqida foydali ogohlantirishlar beradi. Ushbu ogohlantirishlarga e'tibor bering va ularni hal qiling.

useEffect uchun global mulohazalar

Global auditoriya uchun React ilovalarini ishlab chiqishda, ma'lumotlarni olish yoki tashqi API bilan ishlash uchun useEffectdan foydalanganda quyidagilarni hisobga oling:

• API endpointlari va ma'lumotlarni mahalliylashtirish: API endpointlaringiz turli tillar va mintaqalarni qo'llab-quvvatlash uchun mo'ljallanganligiga ishonch hosil qiling. Mahalliylashtirilgan kontentni taqdim etish uchun Kontent Yetkazib Berish Tarmog'idan (CDN) foydalanishni ko'rib chiqing.
• Sana va vaqtni formatlash: Foydalanuvchining lokaliga muvofiq sana va vaqtlarni formatlash uchun xalqarolashtirish kutubxonalaridan (masalan, Intl API yoki moment.js kabi kutubxonalar, lekin kichikroq paket hajmlari uchun date-fns kabi muqobillarni ko'rib chiqing) foydalaning.
• Valyutani formatlash: Shunga o'xshab, foydalanuvchining lokaliga muvofiq valyutalarni formatlash uchun xalqarolashtirish kutubxonalaridan foydalaning.
• Raqamlarni formatlash: Turli mintaqalar uchun mos raqam formatlashdan foydalaning (masalan, kasr ajratuvchilari, minglik ajratuvchilari).
• Vaqt zonalari: Turli vaqt zonalaridagi foydalanuvchilarga sana va vaqtlarni ko'rsatishda vaqt zonasi konvertatsiyalarini to'g'ri bajaring.
• Xatoliklarni qayta ishlash: Foydalanuvchi tilida tushunarli xato xabarlarini taqdim eting.

Sanani mahalliylashtirish misoli:

            import React, { useState, useEffect } from 'react';

function LocalizedDate() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setDate(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const formattedDate = date.toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });

  return 
Joriy sana: {formattedDate}
;
}

export default LocalizedDate;
            

              
                Copy
              
            
          

Ushbu misolda, toLocaleDateString sanani foydalanuvchining lokaliga muvofiq formatlash uchun ishlatiladi. undefined argumenti funksiyaga foydalanuvchi brauzerining standart lokalidan foydalanishni aytadi.

Xulosa

useEffect React funksional komponentlarida yon ta'sirlarni boshqarish uchun kuchli vositadir. Turli naqshlar va eng yaxshi amaliyotlarni tushunib, siz yanada samarali, qo'llab-quvvatlanadigan va mustahkam React ilovalarini yozishingiz mumkin. Effektlaringizni har doim tozalashni, bog'liqliklar massividan oqilona foydalanishni va qayta foydalanish mumkin bo'lgan mantiq uchun maxsus Hook'lar yaratishni unutmang. Ushbu tafsilotlarga e'tibor berib, siz useEffectni o'zlashtirishingiz va global auditoriya uchun ajoyib foydalanuvchi tajribalarini yaratishingiz mumkin.